<template >
   <!-- 修改信息 -->
  <div>
      <h3 class="notitle">当前页面：{{ $route.meta.title }}</h3>
      
   <el-form  :model="form" :rules="rules"  ref="modify" > 
      <!--  inline-message -->

       
       <el-form-item label="账号" prop="userName" class="item-1" >
            <el-input v-model="form.userName" placeholder="请输入账号"  class="input-1" ></el-input>  
            <!-- v-model为数据绑定 placeholder为输入框默认显示-->
       </el-form-item>
       
       <el-form-item label="姓名" prop="realName"  class="item-2">
           <el-input v-model="form.realName" placeholder="请输入姓名"  class="input-2"></el-input>
       </el-form-item>

       <el-form-item label="邮箱" prop="email" class="item-2">
           <el-input  v-model="form.email" placeholder="请输入密码"  class="input-3"></el-input>
       </el-form-item>


      

       
       <el-row >
          <el-col :span="12">
          <el-form-item>
              <el-button  type="primary" id="change-1" @click="dialogVisible = true">
                  修改信息
              </el-button>
              <!-- @click="submit" 绑定点击事件 -->
          </el-form-item>
          </el-col>

         
       </el-row>
          
   </el-form>
  
      <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      append-to-body
      top="20%"
      > 
      <!-- append-to-body出现不会屏幕变暗,top位置下调  -->
      <span>确认提交吗</span>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="change">确 定</el-button>
      </span>
      </el-dialog>
      
      <el-dialog
      title="提示"
      :visible.sync="error"
      width="30%"
      append-to-body
      top="20%"
      ><!-- append-to-body出现不会屏幕变暗,top位置下调 -->
      <span>{{ message }}</span>
      <span slot="footer" class="dialog-footer">
          <el-button @click="error = false">取 消</el-button>
          <el-button type="primary" @click="error = false">确 定</el-button>
      </span>
      </el-dialog>

  </div>
</template>


<script>

import {getinformation} from "@/api/login"
import {Modify} from "@/api/login"
export default {
  
   data(){
       return{
           message:'',//后端返回的提示信息
           dialogVisible: false,
           error:false,//弹出框显示
           
           form:{
               userName:'',
               realName:'',
               email:'',
               id:sessionStorage.getItem("userId"),
           },//数据定义
          
           rules:{
               userName:[
                   {required:false,trigger:'blur',message:'请输入账号'}
               ],
               realName:[
                   {required:false,trigger:'blur',message:'请输入姓名'}
               ],
               email:[
                   {required:false,trigger:'blur',message:'请输入邮箱'}
               ],
               
               
           } //数据校验定义,rules:{}为对象变量
       }
       
   },
   methods:{
      
      getList() {
        getinformation().then(({ data }) => {
              console.log(data)
              if (data.code == 200) {
                this.form.userName=data.data.userName
                this.form.realName=data.data.realName
                this.form.email=data.data.email
                              
              }  
              else {
                  this.$message.error('获取信息失败')
              }
        })
              
      },
      //提交
      change() {
          this.$refs.modify.validate((valid) => {
          // 校验通过
          if (valid) {
            
            Modify(this.form).then(({ data }) => {
                      console.log(data)
                         if (data.code == 200) {
                           this.dialogVisible = false;
                            this.message = data.msg; 
                            this.error = true;//打开弹窗
                            this.getList()
                         }  
                         else {
                            this.dialogVisible = false;
                            this.message = data.msg; 
                            this.error = true;//打开弹窗
                            this.getList()
                         }
                     })

            
          }
        })
   },
  
   },
   created() {
    this.getList()
    
  },
}

</script>

<!-- scoped属性的作用是将当前标签下的样式私有化，仅对当前组件起作用 -->
<style scoped> 
.notitle{
  color: black;
  font-size:25px;
  margin-top: 1%; 
  margin-left: 0%;
}/* 面包屑 */
.el-input{
  width: 260px;
  /* height: 100px; */
  border-radius: 7px 0 0 7px;/*圆框效果 */
  
} /*输入框样式 */

#title{
   color: #3e3a3a;
   margin-top: 10px;
   font-size: 45px;

}


#change-1{
   margin-left: 600px;
   margin-top: 100px;
   width: 150px;
}/* 按钮 */

.item-1{
  margin-left: 500px;
  margin-top: 50px;
}
.item-2{
  margin-left: 500px;
  margin-top: 100px;
}/* 左边距 */

.item-1 >>> .el-form-item__label {
font-size: 20px;
}
.item-2 >>> .el-form-item__label {
font-size: 20px;
}
.input-1{
  margin-left: 10%;
  
}
.input-2{
  margin-left: 10%;
  
}
.input-3{
  margin-left: 10%;
  
}



</style>